{% extends 'backend/home.html' %}
{% load static %}

{% block Primary %}
    <div class="section p-0">
        {% block tableFilter %}

        {% endblock %}

        <div class="card-body pt-1">

            <!-- item list -->
            <div class="table-responsive-md">

                {% block tableItem %}

                {% endblock %}

            </div>

            <!-- pagination, selected items -->
            <div class="row">

                <div class="col py-3 text-center text-md-start">
                    {% block selectedItems %}
                        <!-- selected items -->
                        <div class="d-grid d-md-inline-block dropup">
                            <a class="btn btn-sm btn-primary dropdown-toggle" href="#" role="button" id="ddSelected"
                               data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
                      <span class="group-icon">
                        <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path
                                fill-rule="evenodd"
                                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6"
                                                                                                      x2="18"
                                                                                                      y2="18"></line></svg>
                      </span>
                                <span>Selected items</span>
                            </a>

                            <ul class="dropdown-menu dropdown-menu-clean my-2" aria-labelledby="ddSelected">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                        </svg>
                                        <span>Set active</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg>
                                        <span>Set inactive</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="15" y1="9" x2="9" y2="15"></line>
                                            <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg>
                                        <span>Set unavailable</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-danger" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                        <span class="w-100">Delete</span>
                                    </a>
                                </li>
                            </ul>

                        </div>
                    {% endblock %}
                </div>

                <div class="col-md-auto py-3">
                    {% block pagination %}
                        {% include 'pagination.html' %}
                    {% endblock %}
                </div>

            </div>

        </div>
    </div>
{% endblock %}

